NativeScript Vue — Full Screen Modal and Tabs

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

Full Screen Modal

We can show a full-screen modal by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Modal" @tap="openModal" />
    </FlexboxLayout>
  </Page>
</template>

<script>
const Detail = {
  props: ["id"],
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label :text="id" />
        <Button @tap="$modal.close" text="Close" />
      </StackLayout>
    </Page>
  `,
};
export default {
  methods: {
    openModal() {
      this.$showModal(Detail, { fullscreen: true, props: { id: 1 } });
    },
  },
};
</script>

We call the $showModal method with the Detail component.

And we set the fullscreen property to true to make the modal full screen.

Return Data from the Modal

We can return data from the modal.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Modal" @tap="openModal" />
    </FlexboxLayout>
  </Page>
</template>

<script>
const Detail = {
  props: ["id"],
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label text="Detail" />
        <Button @tap="$modal.close('foo')" text="Close" />
      </StackLayout>
    </Page>
  `,
};
export default {
  methods: {
    async openModal() {
      const data = await this.$showModal(Detail);
      console.log(data);
    },
  },
};
</script>

In the Detail component, we pass in the 'foo' argument in the $modal.close method.

Then we can get that value as the resolved value of the promise returned by $showModal .

BottomNavigation

We can add a navigation bar to the bottom of our screen by writing:

src/mainl.js

import Vue from 'nativescript-vue'
import App from './components/App'
import VueDevtools from 'nativescript-vue-devtools'

if (TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}

// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

new Vue({
  render: h => h(App)
}).$start()

src/components/App.vue

<template>
  <Page>
    <FlexboxLayout flexDirection="column">
      <BottomNavigation>
        <TabStrip>
          <TabStripItem>
            <Label text="Home"></Label>
          </TabStripItem>
          <TabStripItem>
            <Label text="Browse"></Label>
          </TabStripItem>
          <TabStripItem>
            <Label text="Search"></Label>
          </TabStripItem>
        </TabStrip>
        <TabContentItem>
          <Frame id="homeTabFrame">
            <Page>
              <Label text="home" />
            </Page>
          </Frame>
        </TabContentItem>
        <TabContentItem>
          <Frame id="browseTabFrame">
            <Page>
              <Label text="browse" />
            </Page>
          </Frame>
        </TabContentItem>
        <TabContentItem>
          <Frame id="searchTabFrame">
            <Page>
              <Label text="search" />
            </Page>
          </Frame>
        </TabContentItem>
      </BottomNavigation>
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {};
</script>

We render the App component in main.js .

Then in the App component, we add the BottomNavigation component to add the bottom navigation bar.

The TabStrip has the navigation links.

TabStripItem has the content for the tabs.

TabContentItem has the content for the tabs.

The TabContentItem s have the Frame s to show in the tab.

Conclusion

We can add full-screen modals and tabs into our mobile app with NativeScript Vue.